<template>
    <div>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
        <item :item="menuList"></item>
    </el-menu>
    </div>
</template>

<script>
import Item from "../components/Item.vue"
export default {
  data() {
    return {
      menuList: [
        {
          name: "IT互联网",
          type: 1,
          children: [
            {
              name: "编程语言",
              type: 1,
              children: [
                {
                  name: "java",
                  type: 1,
                  children: [
                    {
                      name: "jsp",
                      type: 1,
                      children: [
                        { name: "123", type: 2 },
                        { name: "456", type: 2 }
                      ]
                    }
                  ]
                },
                {
                  name: "python"
                },
                {
                  name: "web"
                },
                {
                  name: "php"
                }
              ]
            },
            {
              name: "前端开发",
              type: 2
            },
            {
              name: "移动开发",
              type: 1,
              children: [
                {
                  type: 2,
                  name: "html5"
                },
                {
                  type: 2,
                  name: "andro"
                },
                {
                  type: 2,
                  name: "ios"
                }
              ]
            },
            {
              name: "游戏开发",
              type: 2
            }
          ]
        },
        {
          name: "设计创作",
          type: 1,
          children: [
            {
              type: 2,
              name: "平面设计"
            },
            {
              type: 2,
              name: "UI设计"
            },
            {
              type: 2,
              name: "软件设计"
            }
          ]
        },
        {
          name: "升学考研",
          type: 1,
          children: [
            {
              type: 2,
              name: "考验"
            },
            {
              type: 2,
              name: "大学"
            },
            {
              type: 2,
              name: "高中"
            },
            {
              type: 2,
              name: "初中"
            }
          ]
        },
        {
          name: "职企考证",
          type: 1,
          children: [
            {
              type: 2,
              name: "公务员"
            }
          ]
        }
      ]
    };
  },
  mounted() {},
  methods: {},
  components: {
      Item
  }
};
</script>

<style lang='scss' scoped>
   .el-menu-vertical-demo{
       width : 220px;
   }
</style>
